<template>
  <div class="main">
    <div class="order-content">
      <div class="order" v-for="(item,index) in data" :key="index">
        <el-radio @input="change" :disabled="Date.now()> Date.parse(new Date(item.end_time))" v-model="radio" :label="item.id"> &nbsp;</el-radio>
        <div class="title">{{ item.name }}</div>
        <div class="time">{{ item.discount_value }}</div>
        <div class="right">
          <div class="right-num">券码:{{ item.code}}</div>
          <div :class="Date.now()> Date.parse(new Date(item.end_time))?'diable right-status':'right-status'">{{ Date.now()> Date.parse(new Date(item.end_time))?'已过期':'可使用' }}</div>
          <div class="out-time">过期时间:{{ item.end_time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { coupon_list } from '@/api/coupon_api'


export default{
  data(){
    return{
      radio:'0',
      data:[]
    }
  },
  methods:{
    change(id){
      this.$confirm('确定使用该优惠券', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              this.$router.push(`/index/${this.$route.query.type_id}?flag=true&coupon_id=${id}`)
            }).catch(() => {        
            });
    },
    async get_list(){
      const id = JSON.parse(localStorage.getItem('user')).user_id
      const {data:res} = await coupon_list(id)
      this.data = res.data
    },
  },
   created(){
    this.get_list() 
  }
}
</script>
<style scoped lang="scss">
  .main{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    background-color: #f2f2f2;
    .order-content{
      color:#fff;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .order{
        height: 15%;
        width: 95%;
        display: flex;
        margin: 20px;
        border-radius: 20px;
        background-color: #FF7043;
        align-items: center;
        justify-content: space-around;
        img{
          margin: 20px;
          border-radius: 10px;
        }
        .title{
          display: flex;
          font-weight: bold;
          font-size: 80px;
          width: 40%;
          margin: 10px;
          line-height: 40px;
        }
        .time{
          font-weight: bold;
          font-size: 80px;
          display: flex;
          align-items: end;
          margin-bottom: 10px;
        }
        .right{
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
            .right-status{
              color: #27D771;
              font-weight: bold;
              &:disabled{
                color: #f2f2f2;
              }
            }
        }
      }

    }
  }
</style>